<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue2的v-model</title>
  <style>
      #app {
          width: 400px;
          height: 50px;
          font-size: 40px;
          color: #ff0000;
      }

      #contain {
          margin-top: 20px;
          width: 400px;
          height: 200px;
          border: 1px solid salmon;
      }

  </style>
</head>
<body>
<input id="app" type="text"/>
<div class="data" id="contain"></div>
</body>
<script>
  // 定义一个data
  window.data = {}
  // 获取dom
  let dom = {
    app: document.querySelector('#app'),
    contain: document.querySelector('#contain')
  }

  let text

  //Object.defineProperty 劫持数据
  Object.defineProperty(window.data, "value", {
    get() {
      return ''
    },
    set(v) {
      dom.contain.innerHTML = v
    }
  })

  // 监听input
  dom.app.addEventListener('input', function (e) {
    //console.log(e.target.value) //获取输入的值
    // 将输入的值赋值给劫持的data
    text = e.target.value
    window.data.value = text
  })

  /*
    1.configurable:表示能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性，默认值为false。
    2.enumerable：表示能否通过for in循环访问属性，默认值为false
    3.writable：表示能否修改属性的值。默认值为false。
    4.value：包含这个属性的数据值。默认值为undefined。
    也可以是访问器属性(get读取,set写入)
  */

</script>
</html>